<script setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getFollowListAPI } from "@/server/api/shopOrder";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const shopIds = ref();
const lists = ref([]);
const baseURL = ref();
const pageNum = ref(1);
const loading = ref(false);
const finished = ref(false);

// 粉丝列表接口
const getFollowListFun = async (shopId, pageNum, pageSize) => {
  const res = await getFollowListAPI(shopId, pageNum, pageSize);
  lists.value.push(...res.data.data.list);
  baseURL.value = res.config.baseURL;
  lists.value.forEach((item) => {
    if (item.userImage && !item.userImage.includes("http")) {
      item.userImage = baseURL.value + item.userImage;
    }
  });
  if (res.data.data.list.length < 9) {
    finished.value = true;
  }
  loading.value = false;
};
// 上拉加载
const onLoad = () => {
  pageNum.value++;
  getFollowListFun("be40af9ff41", pageNum.value, 9);
};

//跳转到聊天
const goChat = (uid) => {
  router.push({
    path: '/ChatInterface',
    query: {
      id: uid
    }
  })
}

onMounted(() => {
  shopIds.value = route.query.id;
  getFollowListFun(shopIds.value, pageNum.value, 9);
});
</script>

<template>
  <!-- 头部 -->
  <TopButtonFans title=" Shop Fans" />
  <div class="shopfans">
    <ul>
      <van-list v-model:loading="loading" :finished="finished" :finished-text="$t('noMore')" @load="onLoad"
        :immediate-check="false">
        <li v-for="(list, index) in lists" :key="index" @click="goChat(list.uid)" class="person">
          <!-- 头像 -->
          <img :src="list.userImage" alt="" />
          <!-- 介绍 -->
          <div class="name">{{ list.userName }}</div>
          <!-- 按钮 -->
          <div class="button">{{ $t("chat") }}</div>
        </li>
      </van-list>
    </ul>
  </div>
</template>



<style lang="scss" scoped>
.shopfans {
  padding: 0 15rem;

  .person {
    display: flex;
    margin-top: 10rem;
    border-bottom: 1.5rem solid #d4d3d3;

    img {
      margin: 12rem 16rem 12rem 0rem;
      width: 68rem;
      height: 68rem;
      border-radius: 50%;
    }

    .name {
      display: flex;
      flex-direction: column;
      width: 173rem;
      font-size: 20rem;
      font-weight: 500;
      margin-top: 15rem;
    }

    .button {
      border: 2rem solid rgba(100, 46, 142, 1);
      width: 80rem;
      height: 32rem;
      margin-top: 30rem;
      margin-left: 25rem;
      border-radius: 4rem;
      text-align: center;
      line-height: 32rem;
      font-size: 14rem;
      font-weight: 600;
      color: rgba(100, 46, 142, 1);
    }
  }
}
</style>